JS有兩個方法可以在瀏覽器中保存用戶的數據，以便在不同頁面之間或甚至在瀏覽器會話之間保持數據的一致性。分別是LocalStorage 與 SessionStorage。

什麼是LocalStorage？ 如何使用?

用於將數據永久性地存儲在瀏覽器中，除非用戶明確刪除它們。
意味著數據在瀏覽器會話之間都會被保留，甚至在瀏覽器重新啟動後也是如此。

範例:使用setItem方法來將數據存儲在LocalStorage中，然後使用getItem方法來檢索數據。

// 使用LocalStorage存儲數據
localStorage.setItem('username', 'john_doe');
let username = localStorage.getItem('username');

什麼是SessionStorage？ 如何使用?

用於在瀏覽器會話期間存儲數據的一種會話存儲方案。
當瀏覽器窗口或選項卡被關閉時SessionStorage中的數據將被清除。

範例:使用setItem方法來將數據存儲在SessionStorage中，一樣使用getItem方法來檢索數據。

// 使用SessionStorage存儲數據
sessionStorage.setItem('language', 'en');
let language = sessionStorage.getItem('language');

存儲限制

1. 存儲的數據量有限在5-10MB之間取決於瀏覽器的預設值。
2. 數據以字符串形式存儲需要進行序列化和反序列化操作。

• 將對象序列化為JSON字符串並存儲在LocalStorage中
  localStorage.setItem('user', JSON.stringify(user));
• 從LocalStorage中檢索數據並反序列化為JavaScript對象
  let storedUser = JSON.parse(localStorage.getItem('user'));

3. 存儲在LocalStorage和SessionStorage中的數據只能是文本無法直接存儲JS對象。

• 用戶首選項設置： 可以使用LocalStorage來存儲用戶的首選項，例如主題顏色或語言選擇，以便在下次訪問時恢復它們。
• 網站緩存： 可以使用LocalStorage或SessionStorage來緩存網站資源，以提高頁面加載速度。
• 表單數據保留： 如果用戶填寫了一個長表單但在提交之前意外關閉了瀏覽器，可以使用SessionStorage來在瀏覽器會話之間保留表單數據。

注意事項

要謹慎處理敏感資料不要將敏感信息存儲在LocalStorage或SessionStorage中哦!

今天介紹到這邊，感謝觀看!